<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>收藏列表</title>
  <!-- 引入 Bootstrap CSS -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <script src="../bootstrap/js/jquery-2.1.0.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <style>
    .route-card {
      transition: transform 0.2s;
      margin-bottom: 20px; /* 调整每条收藏之间的距离 */
    }
    .route-card:hover {
      transform: scale(1.02);
    }
    .card-img-top {
      width: 100%; /* 固定图片宽度 */
      height: 200px; /* 固定图片高度 */
      object-fit: cover; /* 保持图片比例 */
    }
  </style>
</head>
<body class="bg-light">

<div class="container mt-5">
  <div class="card shadow">
    <div class="card-header bg-primary text-white">
      <h3 class="card-title">我的收藏</h3>
    </div>
    <div class="card-body">
      <c:if test="${empty pageInfo.list}">
        <div class="alert alert-info" role="alert">
          您还没有收藏任何内容。
        </div>
      </c:if>
      <c:if test="${not empty pageInfo.list}">
        <div class="row">
          <c:forEach var="route" items="${pageInfo.list}">
            <div class="col-md-6">
              <div class="card route-card h-100">
                <img src="<%=Res.fileUrl%>${route.route_photo}" class="card-img-top" alt="${route.route_name}">
                <div class="card-body">
                  <h5 class="card-title">${route.route_name}</h5>
                  <p class="card-text">
                    <span class="badge bg-success">￥${route.route_price}</span>
                    <span class="badge bg-info">${route.route_day} 天</span>
                  </p>
                  <p class="card-text">${route.description}</p>
                </div>
                <div class="card-footer bg-transparent">
                  <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}" class="btn btn-primary btn-sm" target="_top">查看详情</a>
                  <a href="${pageContext.request.contextPath}/collection/delete?route_id=${route.route_id}&user_id=${user.user_id}" class="btn btn-danger btn-sm float-end">删除</a>
                </div>
              </div>
            </div>
          </c:forEach>
        </div>
      </c:if>
    </div>
    <!-- 分页导航 -->
    <div class="text-center mt-3">
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
            <a href="${pageContext.request.contextPath}/collection/qianlist?currentPage=1&pageSize=${pageInfo.pageSize}" aria-label="First">
              <span aria-hidden="true">首页</span>
            </a>
          </li>
          <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
            <a href="${pageContext.request.contextPath}/collection/qianlist?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <c:forEach begin="1" end="${pageInfo.pages}" var="i">
            <li class="${i == pageInfo.pageNum ? 'active' : ''}">
              <a href="${pageContext.request.contextPath}/collection/qianlist?currentPage=${i}&pageSize=${pageInfo.pageSize}">${i}</a>
            </li>
          </c:forEach>
          <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
            <a href="${pageContext.request.contextPath}/collection/qianlist?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageSize}" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
          <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
            <a href="${pageContext.request.contextPath}/collection/qianlist?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}" aria-label="Last">
              <span aria-hidden="true">尾页</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
</div>

</body>
<script>
  // 判断用户是否为空
  if (${empty user}) {
    if (window.top !== window.self) {
      window.top.location.href = '${pageContext.request.contextPath}/luyou/login'; // 跳出 iframe 并跳转到登录页面
    } else {
      window.location.href = '${pageContext.request.contextPath}/luyou/login'; // 直接跳转到登录页面
    }
  }
</script>
</html>
